import React from 'react';
import {WeaSearchGroup} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import Content_imgSlide_detailedSetting from  './Content_imgSlide_detailedSetting'
import { Select } from 'antd';
const Option = Select.Option;
import { WeaInput, WeaFormItem } from 'ecCom';
import '../css/index';

// 多图元素
export default class Content_imgSlide extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            eAutoSwitchTime: this.props.autoSwitchTime || 4000,
            datas: this.props.datas,
            showTitle: this.props.showTitle,
            fontSize: this.props.fontSize || '16',
            eDetailedSettingible: false,
            fillStyle: this.props.fillStyle || 'fill',
        }
    }
    render() {
        const { eAutoSwitchTime, eDetailedSettingible, datas, showTitle, fontSize, fillStyle } = this.state;
        let eDSProps = {};
        let ImgSlideDetailedSetting = <div></div>
        if (eDetailedSettingible) {
            eDSProps = {
                datas: datas,
                showTitle: showTitle,
                fontSize: fontSize,
                onOk: (datas,showTitle,fontSize) => {
                    this.setState({
                        datas: datas,
                        showTitle: showTitle,
                        fontSize: fontSize,
                        eDetailedSettingible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eDetailedSettingible: false
                    });
                }
            };
            ImgSlideDetailedSetting = (<Content_imgSlide_detailedSetting ecId={`${this && this.props && this.props.ecId || ''}_Content_imgSlide_detailedSetting@lev9p4`} {...eDSProps}/>);
        }
        let EAutoSwitchTime = (this.props.eShareLevel == '2' && <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0uehkq`} label={getLabel(386581, '自动切换时间')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <div style={{display: 'inline-block'}}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@o9fmgx`} value={eAutoSwitchTime} onChange={value => this.setState({eAutoSwitchTime: value})} style={{width: '40%', display: 'inline-block'}}></WeaInput>
                    <div style={{display: 'inline-block', marginLeft: '12px'}}><span>{getLabel(26287, '毫秒')}</span></div>
                </div>
            </WeaFormItem>);
        let EFillStyle = (this.props.eShareLevel == '2' && <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ti722z`} className="portal-imgSlide-images_select" label={getLabel(386582, '填充方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@rsc2y3`} ref="fillStyleSelect" size='large' onChange={value => this.setState({fillStyle: value})} style={{ width: '216px', height: '46px' }} value={fillStyle || 'stretch'}>
                            <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@9o3ydp`} value="fill">
                                <div className="portal-imgSlide-images-style-content-type">
                                    <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/fill.png" alt=""/>
                                    <span className="portal-imgSlide-images-style-content-span">{getLabel(128030, '填充')}</span>
                                </div>
                            </Option>
                            <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@fnu3l4`} value="adapt">
                                <div className="portal-imgSlide-images-style-content-type">
                                    <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/adapt.png" alt=""/>
                                    <span className="portal-imgSlide-images-style-content-span">{getLabel(386583, '适应')}</span>
                                </div>
                            </Option>
                            <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@0vqr0w`} value="stretch">
                                <div className="portal-imgSlide-images-style-content-type">
                                    <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/stretch.png" alt=""/>
                                    <span className="portal-imgSlide-images-style-content-span">{getLabel(386584, '拉伸')}</span>
                                </div>
                            </Option>
                            <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@ge3aq8`} value="tile">
                                <div className="portal-imgSlide-images-style-content-type">
                                    <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/tile.png" alt=""/>
                                    <span className="portal-imgSlide-images-style-content-span">{getLabel(19852, '平铺')}</span>
                                </div>
                            </Option>
                            <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@7mwsof`} value="center">
                                <div className="portal-imgSlide-images-style-content-type">
                                    <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/center.png" alt=""/>
                                    <span className="portal-imgSlide-images-style-content-span">{getLabel(16203, '居中')}</span>
                                </div>
                            </Option>
                        </Select>
                    </WeaFormItem>);
        let EDetailedSetting = (this.props.eShareLevel == '2' && <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ydap1i`} label={getLabel(386585, '图片详细设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                {ImgSlideDetailedSetting}
                <div  style={{marginTop:7}} onClick={() => this.setState({eDetailedSettingible: true})}><a href="javascript:void(0);">{getLabel(19342, '详细设置')}</a></div>
            </WeaFormItem>);
        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@lzlxqx`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@yi0ekn`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@ih3s6u`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {EAutoSwitchTime}
                    {EFillStyle}
                    {EDetailedSetting}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentDatas: this.state.datas,
            eContentShowTitle: this.state.showTitle,
            eContentFontSize: this.state.fontSize,
            eContentFillStyle: this.state.fillStyle,
            eContentAutoSwitchTime: this.state.eAutoSwitchTime
        }
    }
}